<!-- 主体卡片 -->

<template>
  <EasyCard v-if="!diy" :class="mainClass" :title="cardTitle" :width="mainWidth" :noPadding="noPadding" full>
    <template v-if="hasHeader" #header>
      <slot name="header" />
    </template>

    <slot name="statistic" />

    <slot name="search" />

    <slot name="table" />

    <slot />

    <template v-if="hasFooter" #footer>
      <slot name="footer" />
    </template>
  </EasyCard>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from '../props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'BodyCard',

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 主体样式类
     */
    mainClass() {
      const { $options, flex } = this
      const name = `CommonBody-${$options.name}`
      const flexStr = flex ? ` ${name}-flex` : ''
      const tableStr = CORE.WEB.WebTable.auto.default ? ` ${name}-autoTable` : ` ${name}-fullTable`
      return `${name}${flexStr}${tableStr}`
    },

    /**
     * 主体宽度
     */
    mainWidth() {
      const { hasTree, hasOrgan, hasRegion, leftWidth } = this
      if (!hasTree && !hasOrgan && !hasRegion) return '100%'
      return `calc(100% - ${leftWidth})`
    },

    /**
     * 是否有页头
     */
    hasHeader() {
      return this.$scopedSlots && this.$scopedSlots.header
    },

    /**
     * 是否有页脚
     */
    hasFooter() {
      return this.$scopedSlots && this.$scopedSlots.footer
    },

    /**
     * 是否有统计
     */
    hasStatistic() {
      return this.$scopedSlots && this.$scopedSlots.statistic
    },

    /**
     * 是否有查询
     */
    hasSearch() {
      return this.$scopedSlots && this.$scopedSlots.search
    },

    /**
     * 是否有表格
     */
    hasTable() {
      return this.$scopedSlots && this.$scopedSlots.table
    },
  },
}
</script>
